<div class="panel panel-default">
    <div class="panel-heading">
        搜索条件
    </div>
    <div class="panel-body">
        <div class="form-group">
            <div class="row">
                <div class="col-md-2">报名开始时间:</div>
                <div class="col-md-2">
                    <div class="input-group">
                        <input type="text" name="RegistrationStartTime" id="RegistrationStartTime"
                               class="form-control datetimepicker">
                        <span class="input-group-btn">
                            <button class="btn btn-gray" type="button"
                                    onclick="javascript: $('#RegistrationStartTime').val('');">
                                <i class="glyphicon glyphicon-remove"></i>
                            </button>
                        </span>
                    </div>
                </div>
                <div class="col-md-2">报名结束时间:</div>
                <div class="col-md-2">
                    <div class="input-group">
                        <input type="text" name="RegistrationEndTime" id="RegistrationEndTime"
                               class="form-control datetimepicker">
                        <span class="input-group-btn">
                            <button class="btn btn-gray" type="button"
                                    onclick="javascript: $('#RegistrationEndTime').val('');">
                                <i class="glyphicon glyphicon-remove"></i>
                            </button>
                        </span>
                    </div>
                </div>
                <div class="col-md-1">名称:</div>
                <div class="col-md-3"><input type="text" name="Name" id="Name" class="form-control">
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-md-2">计划开始时间:</div>
                <div class="col-md-2">
                    <div class="input-group">
                        <input type="text" name="StartTime" id="StartTime"
                               class="form-control datetimepicker">
                        <span class="input-group-btn">
                            <button class="btn btn-gray" type="button"
                                    onclick="javascript: $('#StartTime').val('');">
                                <i class="glyphicon glyphicon-remove"></i>
                            </button>
                        </span>
                    </div>
                </div>
                <div class="col-md-2">计划结束时间:</div>
                <div class="col-md-2">
                    <div class="input-group">
                        <input type="text" name="EndTime" id="EndTime"
                               class="form-control datetimepicker">
                        <span class="input-group-btn">
                            <button class="btn btn-gray" type="button"
                                    onclick="javascript: $('#EndTime').val('');">
                                <i class="glyphicon glyphicon-remove"></i>
                            </button>
                        </span>
                    </div>
                </div>
                <div class="col-md-1">状态:</div>
                <div class="col-md-3">
                    <div class="row">
                        <div class="col-md-6">
                            <select name="IsOpen" id="IsOpen" class="form-control">
                                <option value="">全部</option>
                                <option value="1">开放</option>
                                <option value="0">关闭</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <input type="button" value="搜索" class="btn btn-info" id="btnSearch">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-body">
        <table id="list" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th></th>
                <th>培训名称</th>
                <th>报名时段</th>
                <th>计划时段</th>
                <th>状态</th>
                <th>费用</th>
                <th>可选课数</th>
                <th></th>
            </tr>
            </thead>

            <tbody>

            </tbody>
        </table>
    </div>
</div>


<script>
    $(function () {
        var regConfig = {
            language: 'cn',
            separator: ' 至 ',
            format: 'YYYY年MM月DD日 HH:mm',
            autoClose: false,
            time: {
                enabled: true
            },
            getValue: function () {
                if ($('#RegistrationStartTime').val() && $('#RegistrationEndTime').val())
                    return $('#RegistrationStartTime').val() + ' 至 ' + $('#RegistrationEndTime').val();
                else
                    return '';
            },
            setValue: function (s, s1, s2) {
                $('#RegistrationStartTime').val(s1);
                $('#RegistrationEndTime').val(s2);
            }
        };

        var Config = {
            language: 'cn',
            separator: ' 至 ',
            format: 'YYYY年MM月DD日 HH:mm',
            autoClose: false,
            time: {
                enabled: true
            },
            getValue: function () {
                if ($('#StartTime').val() && $('#EndTime').val())
                    return $('#StartTime').val() + ' 至 ' + $('#EndTime').val();
                else
                    return '';
            },
            setValue: function (s, s1, s2) {
                $('#StartTime').val(s1);
                $('#EndTime').val(s2);
            }
        };

        $('#RegistrationStartTime').dateRangePicker(regConfig);
        $('#RegistrationEndTime').dateRangePicker(regConfig);

        $('#StartTime').dateRangePicker(Config);
        $('#EndTime').dateRangePicker(Config);

        $('#list').dataTable({
            "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]], //分页控制
            "pageLength": 10,//首次加载的数据条数
            "order": [[2, "desc"]],   //默认排序
            "createdRow": function (row, data, index) {
                //row 行对象,data 数据对象,index行索引
                if (data['isopen'] == 1) {
                    $('td', row).eq(4).css('font-weight', "bold").css("color", "red");
                }
                $('td', row).eq(2).html(data['RegStartTime'] + ' 至 ' + data['RegEndTime']);
                $('td', row).eq(3).html(data['StartTime'] + ' 至 ' + data['EndTime']);
            },
            "dom": '<"top"l>rt<"bottom"ip><"clear">',
            "columnDefs": [
                // 增加一列，包括删除和修改，同时将需要传递的数据传递到链接中
                {
                    "targets": [0], // 目标列位置，下标从0开始
                    "searchable": false,
                    "orderable": false,
                    "data": "id", // 数据列名
                    "render": function (data, type, full) { // 返回自定义内容
                        return "<input type='checkbox'>";
                    }
                },
                // 增加一列，包括删除和修改，同时将需要传递的数据传递到链接中
                {
                    "targets": [7], // 目标列位置，下标从0开始
                    "searchable": false,
                    "orderable": false,
                    "data": "id", // 数据列名
                    "render": function (data, type, full) { // 返回自定义内容
                        return "<div class=\"btn-group\">" +
                            "<button type=\"button\" class=\"btn btn-g dropdown-toggle\" data-toggle=\"dropdown\">" +
                            "操作 <span class=\"caret\"></span>" +
                            "</button>" +
                            "<ul class=\"dropdown-menu\" role=\"menu\">" +
                            "<li>" +
                            "<a href='{:U('Add','','')}?id=" + data + "'>编辑</a>" +
                            "</li>" +
                            "<li>" +
                            //"<a href='javascript:;' onclick='showAjaxModal(" + data + ");'>关联课程</a>" +
                            "<a href='{:U('CourseRelation','Course','')}?id=" + data + "'>关联课程</a>" +
                            "</li>" +
                            "<li>" +
                            "<a onclick='return confirm(\"你确认要删除么？\");' href='{:U('delete','','')}?id=" + data + "'>删除</a>" +
                            "</li>" +
                            "</ul>" +
                            "</div>";
                    }
                }
            ],
            "language": {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 条记录",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 条记录，共 _TOTAL_ 条",
                "sInfoEmpty": "显示第 0 至 0 条记录，共 0 条",
                "sInfoFiltered": "(由 _MAX_ 条结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            "processing": true,//分页，取数据等等的都放到服务端去
            "serverSide": true,//载入数据的时候是否显示“载入中”
            "columns": [
                {},
                {"data": "name"},
                {"data": "registrationstarttime"},
                {"data": "starttime"},
                {"data": "IsOpenDesc"},
                {"data": "trainingcost"},
                {"data": "allownumberofcourses"},
                {"width": "10%"}
            ],
            "ajax": {
                "url": "{:U('Training/GetData','','')}",
                "type": "post"
            },
        });

        //搜索按钮
        $("#btnSearch").on('click', function () {
            var name = $("#Name").val();
            var regBeginTime = $("#RegistrationStartTime").val();
            var regEndTime = $("#RegistrationEndTime").val();
            var beginTime = $("#StartTime").val();
            var endTime = $("#EndTime").val();
            var isOpen = $("#IsOpen").val();

            $('#list').DataTable().column(1).search(name)
                .column(2).search(regBeginTime + '|' + regEndTime)
                .column(3).search(beginTime + '|' + endTime)
                .column(4).search(isOpen).draw();
        });
    });

    function showAjaxModal(data) {
        //console.log("{:U('CourseRelation','Course','')}?id=" + data)
        jQuery('#modalView').modal('show', {backdrop: 'static'});

        jQuery.ajax({
            url: "{:U('CourseRelation','Course','')}?id=" + data,
            success: function (response) {
                jQuery('#modalView .modal-body').html(response);
            }
        });
    }
</script>